<template>
  <div style="text-align: center; width: 30vw;">
    <!-- <a-list bordered item-layout="horizontal" :data-source="data.source">
    <template #renderItem="{ item }">
      <a-list-item>
           <button class="custom-btn btn-16"> {{ item }}</button>
      </a-list-item>
    </template>
</a-list> -->
    <ScrollingList v-if="props.showType === 'scrolling'" class="scrollingListStyle" :listContent="data.source" />
    <RawPage v-else-if="props.showType === 'card'" :rootUrl="props.url" :pageConfig="props.pageConfig" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

import { reactive } from "@vue/reactivity";
import ScrollingList from './/ScrollingList.vue';
import RawPage from './RawPage.vue'
var props = defineProps({
  url: {
    type: String,
    default: 'http://127.0.0.1:8070/',
  },
  showType: {
    type: String,
    default: 'scrolling'
  },
  pageConfig: {
    type: Object,
    default: {}
  }
});
const data = reactive({
  source: [],
  // rootUrl: 'http://127.0.0.1:8070',
  // api: '/sse'
});
// var source = ref([]);
// var url = ref('http://127.0.0.1:8070/sse');

if ('EventSource' in window) {
  data.source = ['支持EventSource'];
  console.log('支持EventSource');
}

var eventSource = new EventSource(props.url + 'sse');
eventSource.onopen = function (event) {
  console.log('sse成功打开');
  // console.log(event);
};

eventSource.onmessage = (event) => {
  var s_data = event.data;
  var s_item;
  var s_items;
  var i_idx;
  var tempSource = [];
  if (s_data.substr(0, 6) == "ReLoad")
    setTimeout(function () {
      window.location.reload();
    }, 500);
  while (s_data.indexOf("{|}") > -1) {
    i_idx = s_data.indexOf("{|}");
    s_item = s_data.substr(0, i_idx);
    //分页展示的控制
    if (s_item.indexOf("Page0") == 0) {
      // document.getElementById("page0").style.visibility = "visible";
      // document.getElementById("page1").style.visibility = "hidden";
    }
    if (s_item.indexOf("Page1") == 0) {
      // document.getElementById("page0").style.visibility = "hidden";
      // document.getElementById("page1").style.visibility = "visible";
    }

    if (s_item.indexOf("Bar") == 0) {
      s_items = s_item.split("|", 4);

    } else if (s_item.indexOf("Gph") == 0) {
      s_items = s_item.split("|", 3);

    } else if (s_item.indexOf("Arc") == 0) {
      s_items = s_item.split("|", 5);

    } else {
      s_items = s_item.split("|", 2);

      // if (s_items[0] == "Simple1")
      //   document.getElementById("Simple1").innerHTML = s_items[1];
      // if (s_items[0] == "Simple2")
      //   document.getElementById("Simple2").innerHTML = s_items[1];
      // if (s_items[0] == "Simple3")
      //   document.getElementById("Simple3").innerHTML = s_items[1];
      // if (s_items[0] == "Simple4")
      //   document.getElementById("Simple4").innerHTML = s_items[1];
      // if (s_items[0] == "Simple5")
      //   document.getElementById("Simple5").innerHTML = s_items[1];
      // if (s_items[0] == "Simple6")
      //   document.getElementById("Simple6").innerHTML = s_items[1];
      // if (s_items[0] == "Simple9")
      //   document.getElementById("Simple9").innerHTML = s_items[1];

    }
    s_data = s_data.substr(i_idx + 3);
    if (s_items[1] != null && s_items[1] != '') {
      tempSource.push(s_items[1]);
    }
  };
  data.source = tempSource;
};
</script>

<style scoped>
.custom-btn {
  width: 300px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
}

/* 16 */
.btn-16 {
  border: none;
  color: #000;
}

.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  box-shadow:
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-16:hover {
  color: #000;
}

.btn-16:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.btn-16:active {
  top: 2px;
}

.scrollingListStyle {
  /* position: absolute; */
  /* left: 100px; */
}
</style>